<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.lang.management.*" %>
<%@ page import="java.util.*" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../jquery/jquery.qtip-1.0.0-rc3.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../jquery/json2.js'></script>

<script type='text/javascript'>
	var clicked_event_id;
	function delete_event(){ // send event uid for deletion
		$.ajax({
		    type: "DELETE",
		    url: "../rest/events" + '/' + clicked_event_id,
		});
	
// 		calendar.fullCalendar( 'refetchEvents' );
		setTimeout('window.location.reload()', 300);
	};
	
	$(document).ready(function() {
		var new_event_dia = $('#new_event_dialog').dialog({
				autoOpen: false,
				title: 'Additional Info'
			});
		
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
		    eventSources: [
				// json event source
				{
				    url: '../rest/events', // use the `url` property
// 				    color: 'chartreuse ',
// 				    textColor: 'black',
				    data: { // appends any other information to query
				    	tzoffset_browser: date.getTimezoneOffset() // for UTC
				    }
				}
				// any other sources...
	  		    ],
			ignoreTimezone: false, // make use of timezone info in time data
			lazyFetching: false, // re-fetch events often
			selectable: true, // able to drag-make new events
			selectHelper: true, // translucent outline
			
			select: function(start, end, allDay) { // add new event
// 				new_event_dia.dialog('open');
				var title = prompt('Event Title:');
				if (title) {
					var newEvent = {
						start: start,
						end: end,
						title: title,
						allDay: allDay,
						tzoffset: date.getTimezoneOffset()
					};
					alert("Input: " + JSON.stringify(newEvent));
					$.ajax({
					    type: "POST",
					    url: "../rest/events",
					    contentType: "application/json",
					    data: JSON.stringify(newEvent),
					});
					
						calendar.fullCalendar('renderEvent',
								newEvent,
							false // make the event "un-stick" after refetch
						);
				}
				calendar.fullCalendar('unselect');
// 				setTimeout("calendar.fullCalendar( 'refetchEvents' )", 1000);
				setTimeout('window.location.reload()', 1000); // reload
			},
			
			eventDrop: function(event, dayDelta, minuteDelta, allDay) { // upload data when event drag and dropped
				var droppedEvent = {
					id: event.id,
					title: event.title,
					description: event.description,
					start: event.start,
					end: event.end,
					allDay: event.allDay,
					tzoffset: date.getTimezoneOffset(),
					dayDelta: dayDelta,
					minuteDelta: minuteDelta,
					actionType: "time_change"
				};
				$.ajax({
				    type: "PUT",
				    url: "../rest/events",
				    contentType: "application/json",
				    data: JSON.stringify(droppedEvent),
				});
// 				setTimeout("calendar.fullCalendar( 'refetchEvents' )", 100); // reload
				setTimeout('window.location.reload()', 300);
			},
			eventResize: function(event) { // upload data when even resized
				var resizedEvent = {
					id: event.id,
					title: event.title,
					description: event.description,
					start: event.start,
					end: event.end,
					allDay: event.allDay,
					tzoffset: date.getTimezoneOffset(),
					dayDelta: dayDelta,
					minuteDelta: minuteDelta,
					actionType: "time_change"
				};
				$.ajax({
				    type: "PUT",
				    url: "../rest/events",
				    contentType: "application/json",
				    data: JSON.stringify(resizedEvent),
				});
// 				setTimeout("calendar.fullCalendar( 'refetchEvents' )", 100); // reload
				setTimeout('window.location.reload()', 300);
			},
			eventResizeStart: function(event) { // triggered when resizing begin
				var resizedEvent = {
						title: event.title,
						description: event.description,
						start: event.start,
						end: event.end,
						allDay: event.allDay,
						tzoffset: date.getTimezoneOffset()
				};
			},
			
			editable: true,
			eventClick: function(event, element) {
				clicked_event_id = event.id;
// 		        event.title = "CLICKED!";
// 		        event.color = 'red';
// 		        $('#calendar').fullCalendar('updateEvent', event);
		    },
		    eventRender: function(event, element) {
		    	element.qtip({
		            content: {
		                title: { text: event.title },
		                text: 
		                	'<span class="title">Start: </span>' +
			                ($.fullCalendar.formatDate(event.start, 'ddd, MMM d h:mmTT')) +
			                '<br>End: ' +
			                ($.fullCalendar.formatDate(event.end, 'ddd, MMM d h:mmTT')) +
			                '<br><span class="title">Description: </span>' + event.description +
			                '<hr>' +
			                '<a href="javascript:void(0)" onclick="delete_event();">delete</a>'
		                
// 		                "delete".link("javascript:delete_event(" + String(event.id) + ")")
		            },
		            show: {
		            	when: 'click',
		            	effect: 'fade',
		            	solo: true,
		            	delay: 0
		            	},
		            hide: { 
		            	when: 'click',
		            	effect: 'fade',
		            	delay: 0 
		            	},
		            position: {
		            	corner: {
		            		target: 'topMiddle',
		            		tooltip: 'bottomMiddle'
		            	}
		            },
		            style: { 
		                width: 250,
		                padding: 1,
		                color: 'black',
		                textAlign: 'left',
		                border: {
		                width: 1,
		                radius: 3
		            },
		            tip: 'bottomMiddle',

		            classes: { 
	                    tooltip: 'ui-widget', 
	                    tip: 'ui-widget', 
	                    title: 'ui-widget-header', 
	                    content: 'ui-widget-content' 
		             }
		           }
		        });
		    },
			//weekends: false, // will hide Saturdays and Sundays
			defaultView: 'agendaWeek'
		});
	});
	
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

</head>
<body>

<form name="eventform" action="../rest/events" method="post">
		<input type="submit" value="Submit" />
</form>

<div id='calendar' style="width:700px;"></div>

<%
        Iterator iter = ManagementFactory.getMemoryPoolMXBeans().iterator();
        while (iter.hasNext()) {
            MemoryPoolMXBean item = (MemoryPoolMXBean) iter.next();
%>

<table border="0" width="100%">
<tr><td colspan="2" align="center"><h3>Memory MXBean</h3></td></tr>
<tr><td width="200">Heap Memory Usage</td><td>
<%=ManagementFactory.getMemoryMXBean().getHeapMemoryUsage()%>
</td></tr>
<%} %>

<tr>
  <td>Non-Heap Memory Usage</td>
  <td><%=ManagementFactory.getMemoryMXBean().getNonHeapMemoryUsage()%></td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2" align="center"><h3>Memory Pool MXBeans</h3></td></tr>
<%
        iter = ManagementFactory.getMemoryPoolMXBeans().iterator();
        while (iter.hasNext()) {
            MemoryPoolMXBean item = (MemoryPoolMXBean) iter.next();
%>
<tr><td colspan="2">
<table border="0" width="100%" style="border: 1px #98AAB1 solid;">
<tr><td colspan="2" align="center"><b><%= item.getName() %></b></td></tr>
<tr><td width="200">Type</td><td><%= item.getType() %></td></tr>
<tr><td>Usage</td><td><%= item.getUsage() %></td></tr>
<tr><td>Peak Usage</td><td><%= item.getPeakUsage() %></td></tr>
<tr><td>Collection Usage</td><td><%= item.getCollectionUsage() %></td></tr>
</table>
</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
<%
}
%>

</table>



<div id="new_event_dialog" title="Basic dialog">
	<form name="eventform" action="../rest/events" method="post">
		Event Title: <input type="text" name=title value="Enter a title." onclick="document.eventform.title.value='';" />
		<br>
		Event Content: <br> <textarea name=content rows="10" cols="30" onclick="document.eventform.content.value='';">
		Enter event details here
		</textarea>
		<br>
		<input type="submit" value="Submit" />
		<br>
	</form>
</div>

</body>
</html>
